/*
 * @Author: zhiming
 * @Date: 2020-08-19 11:40:10
 * @LastEditTime: 2020-08-26 16:36:36
 * @LastEditors: Please set LastEditors
 * @Description: webpack配置文件
 * @FilePath: \Webpack\webpack.config.js
 */
//webpack是node写出来的使用node语言
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //配置HTML模板插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽离css文件
const PostCss = require('autoprefixer')({ //处理css兼容性，会自动将打包后的css3样式加上-webkit前缀等
    "overrideBrowserslist": [
        'last 10 Chrome versions',
        'last 5 Firefox versions',
        'Safari >= 6',
        'ie > 8'
    ]
});
const OptimizeCss = require('optimize-css-assets-webpack-plugin'); //css压缩
const UglifyjsPlugin = require('uglifyjs-webpack-plugin'); //js压缩
const { loader } = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //每次构建前清理/dist文件夹是比较推荐的做法

module.exports = {
    mode: 'production', //模式 默认两种production(生产环境：代码压缩)  development（开发环境：代码不压缩）
    //entry: './src/index.js', //单文件入口
    entry: { //多文件入口
        index: './src/index.js',
        admin: './src/admin.js'
    },
    devtool: 'inline-source-map', //开发环境，为了更容易追踪错误和警告，编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。
    output: {
        // filename: 'bundle.js', //打包后的文件名
        filename: 'static/js/[name].js', //多文件配置时直接入口文件的key值作为打包文件名
        path: path.resolve('dist'), //路径必须是绝对路径
        publicPath: '/' //build之后的公共路径（很重要）,一般生成环境中主域名是不会让你使用的，会让你的项目放在子目录下面
    },
    devServer: { //开启服务器配置
        port: 8081, //端口
        host: "localhost", //ip地址：localhost本地， 0.0.0.0可以访问网络地址
        progress: true, //开启进度条
        contentBase: "./dist", //默认打开目录
        open: true, //自动打开浏览器
        compress: true, //启动gzip压缩
        proxy: { //配置代理解决跨域问题
            '/api': {
                target: 'http://10.0.193.147:8080', //配置代理的地址
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': '' //需要重写的
                }
            }
        }
    },
    plugins: [ //一个存放所有插件的数组
        new CleanWebpackPlugin(), //每次构建前清理dist,避免杂乱
        new HtmlWebpackPlugin({ //配置这个模板之后contentBase:"./dist"不生效
            template: "./public/index.html", //模板地址
            filename: "index.html", //模板文件名
            minify: {
                collapseWhitespace: true //折叠换行，true表示不换行
            },
            hash: true, //生成环境下生成哈希戳，避免浏览器缓存
            chunks: ['index'], //只引用index.js.解决index.html里面有index.js和admin.js的问题
        }),
        new HtmlWebpackPlugin({ //多页面配置
            template: "./public/admin.html", //模板地址
            filename: "admin.html", //模板文件名
            minify: {
                collapseWhitespace: true //折叠换行，true表示不换行
            },
            hash: true, //生成环境下生成哈希戳，避免浏览器缓存
            chunks: ['admin'], //只引用admin.js.解决admin.html里面有index.js和admin.js的问题
        }),
        new MiniCssExtractPlugin({
            filename: 'static/css/main.css' //打包后的路径
        })
    ],
    module: { //模块
        rules: [ //配置规则
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, //都放到上面main.css里面
                    {
                        loader: 'css-loader'
                    }, 
                    {//处理css兼容性
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                PostCss
                            ]
                        }
                    }
                ]
            }, 
            { 
                test: /\.(png|svg|jpg|gif)$/, //图片等资源文件处理
                use: {
                    loader: 'file-loader', //file-loader加载图片，url-loader图片小于多少k使用base64加载图片
                    options: {
                        limit: 100*1024, //小于100k使用base64
                        outputPath: './static/images' //build之后的目录分类
                    }
                }
            }, 
            { 
                //es6转es5
                test: /\.(js|jsx)$/, //支持require('*.js')文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ],
                        plugins: [
                            '@babel/plugin-proposal-class-properties',
                            '@babel/plugin-transform-runtime'
                        ]
                    }
                },
                include: path.resolve(__dirname, 'src'), //需要转换的文件夹
                exclude: '/node_modules/'
            }
        ]
    },
    optimization: { //优化项启动后mode模式代码压缩不再生效，必须配置js压缩插件
        minimizer: [
            new OptimizeCss(), //css压缩
            new UglifyjsPlugin({ //js压缩
                cache: true, //是否使用缓存
                parallel:true, //是否并发打包
                sourceMap: true //es6映射es6需要使用
            })
        ]
    }
}